<template>
  <!-- 基于 Element UI 新增和修改弹窗 -->
    <a-drawer
            :title="!dataForm.imgid ? '添加' : '修改'"
            :visible="visible"
            @close="cancel"
            :body-style="{ paddingBottom: '80px' }"
            :width="750"
    >
    <!-- 新增和创建表单表单 -->
    <el-form :model="dataForm" :rules="dataRule"  v-loading="loading" ref="dataForm" @keyup.enter.native="dataSubmit()" label-width="80px" style="padding: 0px 10px;margin: 0px 10px">
    <el-form-item label="标题" prop="title">
      <el-input v-model="dataForm.title" placeholder="请输入标题" size="small"></el-input>
    </el-form-item>
    <el-form-item label="内容" prop="content">
      <el-input type="textarea" v-model="dataForm.content" placeholder="请输入内容" size="small"></el-input>
    </el-form-item>

    <el-form-item label="展示图" prop="img">
      <template slot-scope="scope"  >
        <upload-img text="展示图" :fileListValue="dataForm.img" v-model="dataForm.img" style="margin-bottom: -30px"></upload-img>
      </template>
    </el-form-item>
    <el-form-item label="系统" prop="system">
      <el-select v-model="dataForm.system" placeholder="请选择系统" class="small" filterable clearable>
        <el-option label="全部" :key="0" :value="0"></el-option>
        <el-option label="Android" :key="1" :value="1"></el-option>
        <el-option label="IOS" :key="2" :value="2"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="软件id" prop="sid">
      <el-input v-model="dataForm.sid" placeholder="请输入软件id" size="small"></el-input>
    </el-form-item>
    <el-form-item label="appid" >
      <el-input v-model="dataForm.appid" placeholder="推送IOS系统时需要填写软件appstore的appid" size="small"></el-input>
    </el-form-item>
    <el-form-item label="用户ID" >
      <el-input type="textarea" v-model="dataForm.userid" placeholder="精确推送给多个用户，用户ID用,隔开" size="small"></el-input>
    </el-form-item>
    <el-form-item label="推送客服" prop="robotid">
      <el-select v-model="dataForm.robotid" placeholder="请选择" class="selWidth" filterable>
        <el-option
          v-for="item in robotList"
          :label="item.displayName+'-'+item.uid"
          :key="item.uid"
          :value="item.uid">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="附加内容" >
      <el-input v-model="dataForm.extra" placeholder="请输入附加内容" size="small"></el-input>
    </el-form-item>
    </el-form>
        <div :style="{position: 'absolute',right: 0,bottom: 0,width: '100%', borderTop: '1px solid #e9e9e9',padding: '10px 16px',background: '#fff',textAlign: 'right',zIndex: 1,}">
            <el-button @click="cancel()" :style="{ marginRight: '8px' }">取消</el-button>
            <el-button type="primary" @click="submit()">确定</el-button>
        </div>
  </a-drawer>
</template>

<script>
    import api from '@/api/api'
    import uploadImg from '@/components/Upload/uploadImg'
    import uploadFile from '@/components/Upload/uploadFile'

    export default {
      components: {
        uploadImg,uploadFile
      },
    data () {
      return {
        visible: false,
        loading:false,
        robotList:[],
        dataForm: {
          id: 0,
          title: '' ,
          content: '' ,
          system: '' ,
          img: '' ,
          sid: '' ,
          appid: '' ,
          userid: '' ,
          extra: '' ,
          robotid:''
        },
        dataRule: {
          title: [
            { required: true, message: '标题  为必填项', trigger: 'blur' }
          ],
          content: [
            { required: true, message: '内容  为必填项', trigger: 'blur' }
          ],
          system: [
            { required: true, message: '系统  为必填项', trigger: 'blur' }
          ],
          img: [
            { required: true, message: '图片  为必填项', trigger: 'blur' }
          ],
          sid: [
            { required: true, message: '软件id  为必填项', trigger: 'blur' }
          ],
          appid: [
            { required: true, message: 'appid  为必填项', trigger: 'blur' }
          ],
          userid: [
            { required: true, message: '用户ID  为必填项', trigger: 'blur' }
          ],
          handlecount: [
            { required: true, message: '执行次数  为必填项', trigger: 'blur' }
          ],
          pushcount: [
            { required: true, message: '推送人数  为必填项', trigger: 'blur' }
          ],
          extra: [
            { required: true, message: '附加内容  为必填项', trigger: 'blur' }
          ],
          status: [
            { required: true, message: '状态  为必填项', trigger: 'blur' }
          ],
          robotid: [
            { required: true, message: '推送客服  为必填项', trigger: 'blur' }
          ],
          createtime: [
            { required: true, message: '创建时间  为必填项', trigger: 'blur' }
          ],
          finishtime: [
            { required: true, message: '最后完成时间  为必填项', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      init (id) { // 初始化表单验证规则
        this.getRobotList()
        this.dataForm.id = id || undefined
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id){
              this.loading = true
                api.post('rest/vabc/impush/info',{id:this.dataForm.id}).then(res => {
                this.dataForm = res;
            }).finally(() => {
                this.loading = false
            });
          }
        })
      },
      // 表单数据提交
      submit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.loading = true
            let postData=Object.assign({},this.dataForm)
            if (!this.dataForm.id){
                postData.id==undefined
                api.post('rest/vabc/impush/save',postData).then(res =>{
                    this.$message.success("创建成功")
                    this.reset()
                    this.visible = false
                    this.$parent.getDataList()
                }).finally(() => {
                    this.loading = false
                });
            }else{
                api.post('rest/vabc/impush/update',postData).then(res =>{
                    this.$message.success("保存成功")
                    this.reset()
                    this.visible = false
                    this.$parent.getDataList()
                }).finally(() => {
                    this.loading = false
                });
            }
          }
        })
      },
     cancel(){
        this.visible = false
        this.reset()
    },
    reset(){
        this.$refs.dataForm.resetFields()
        this.$data.dataForm=JSON.parse(JSON.stringify(this.$options.data().dataForm))
        //图片回写
        //this.$refs["childData"].fileList=[]
    }, getRobotList () {
        let postData={
          'order':'desc',
          'column':'id',
          'type':1,
          'deleted':0
        }
        //postData.key=postData.key.length==0?postData.key:'%'+postData.key+'%'
        api.post('rest/vabc/imuser/list',postData).then(res => {
          this.robotList=res.datalist
        }).finally(() => {
        });
      },
    }
  }
</script>
